<!--
 * @Descripttion:
 * @Author: Silence
 * @Date: 2023-08-12 11:23:16
 * @LastEditors: Silence
 * @LastEditTime: 2023-08-12 11:34:42
-->
<template>
  <div class="Workorder-container">
    <div class="Workorder-mian">
      <div class="Workorder-input">
        <div class="WorkorderInput-compoents">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="工单编号:">
              <el-input v-model="formInline.user" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="工单状态:">
              <el-select v-model="formInline.region" placeholder="请选择" clearable>
                <el-option label="待办" value="shanghai" />
                <el-option label="进行" value="beijing" />
                <el-option label="取消" value="beijing" />
                <el-option label="完成" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="medium" class="WorkorderInput-btn-color" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="Workorder-btn">
        <el-button type="primary" icon="el-icon-circle-plus-outline" size="medium" class="custom-button" @click="operateAdd">新建</el-button>
        <el-button size="medium" class="custom-button2" type="primary" @click="operateDeploy">工单配置</el-button>
      </div>
      <div class="Workorder-form">
        <WorkorderForm :dialog-detail.sync="dialogDetail" :list="list" :count="count" :page="page" :detail-obj="detailObj" @goodsManageApiList="goodsManageApiList" @detailData="detailData" />
      </div>
    </div>
    <MaintenanceAdd v-if="dialogVisible" v-model="dialogVisible" />
    <maintenanceDetail v-if="dialogDetail" v-model="dialogDetail" :detail-obj="detailObj" />
    <maintenanceDeploy v-model="Deploy" />
  </div>
</template>
<script>
import WorkorderForm from './components/WorkorderForm.vue' // 表格封装
import MaintenanceAdd from './components/maintenanceAdd.vue'
import maintenanceDetail from './components/maintenanceDetail.vue'
import maintenanceDeploy from './components/maintenanceDeploy.vue'
import { goodsManageApi } from '../../api/operate'
export default {
  name: 'Operate',
  components: {
    WorkorderForm,
    MaintenanceAdd,
    maintenanceDetail,
    maintenanceDeploy
  },
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      dialogVisible: false, // 新建的控制开关
      dialogDetail: false, // 表各控制开关
      Deploy: false, // 工单配置开关,
      count: {
        pageSize: '10', // 每页几条
        pageIndex: '1' // 第几页
      },
      list: [],
      // 后台给的
      page: {
        totalCount: '',
        totalPage: ''
      },
      // 表单的详情传给 弹窗
      detailObj: {
        name: null
      }
    }
  },
  created() {
    this.goodsManageApiList()
  },
  methods: {
    // 新建按钮
    operateAdd() {
      this.dialogVisible = true
    },
    // 工单配置按钮
    operateDeploy() {
      this.Deploy = true
    },
    // 获取数据=列表
    async goodsManageApiList(obj) {
      let res
      if (obj) {
        res = await goodsManageApi({ taskCode: obj })
      } else {
        res = await goodsManageApi(this.count)
      }
      console.log(res, 777777)
      this.list = res.data.currentPageRecords
      this.page.totalCount = res.data.totalCount
      this.page.totalPage = res.data.totalPage
    },
    // 表单传值
    detailData(e) {
      console.log(e)
    },
    onSubmit() {
      console.log('submit!')
      this.goodsManageApiList(this.formInline.user)
    }
  }
}
</script>
<style lang='scss'  scoped>
.Workorder-mian{
  margin: 0px;
  .Workorder-input{
    margin-bottom: 17px;
  // background-color: red;
  .WorkorderInput-compoents{
::v-deep   .demo-form-inline{
    .el-input__inner{
      height: 36px;
      line-height: 36px;
    }
      .el-form-item__label{
        font-weight: 400;
      }
  }
  .WorkorderInput-btn-color{
     width: 80px;
    height: 36px;
    padding: 5px;
    border: 0px solid #fff;
   background-color: #5f84ff;
  }
    .WorkorderInput-btn-color:hover {
    background-color: #5373e0;
  }
}
  }
  .Workorder-btn{
    margin-bottom: 20px;
  // background-color: green;
  }
  .Workorder-form{
    margin-bottom: 20px;
  // background-color: yellow;

  }
   .custom-button {
    width: 80px;
    height: 36px;
    padding: 5px;
    border: 0px solid #fff;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    }
   .custom-button:hover{
 background: linear-gradient(135deg,#ff7d43,#db3602)!important;
    }
    .custom-button2{
      color: #655b56;
    width: 80px;
    height: 36px;
    padding: 5px;
    border: 0px solid #fff;
    background-color: #fbf4f0;
    }
    .custom-button2:hover{
    background-color: #f3e7e1;
    }
}
</style>
